<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"><head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
  <!-- 引入样式 -->
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/resources/css/public.css" media="all">
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field layui-field-title">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" id="searchForm" method="post">
   		<div class="layui-form-item">
   		<div class="layui-inline">
            <label class="layui-form-label" >供应商</label>
            <div class="layui-input-inline">
                 <select name="providerid" id="searchproviderid">
                 	<option value="">请选择供应商</option>
			     </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >商品名称</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >生产批号</label>
            <div class="layui-input-inline">
                <input type="text" name="productcode"  autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >批准文号</label>
            <div class="layui-input-inline">
                <input type="text" name="promitcode"  autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >商品描述</label>
            <div class="layui-input-inline">
                <input type="text" name="description"  autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >商品规格</label>
            <div class="layui-input-inline">
                <input type="text" name="size"  autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >商品包装</label>
            <div class="layui-input-inline">
                <input type="text" name="goodspackage"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <a class="layui-btn search_btn" id="doSearch">查询</a>
        <button type="reset" class="layui-btn layui-btn-warm">清空</button>
    </div>
</form>
<table id="goodsList" lay-filter="goodsList"></table>
<!--表格工具条-->
<div  style="display: none;" id="tableToolBar">
	<a class="layui-btn layui-btn layui-btn" shiro:hasPermission="goods:create"  lay-event="add">添加</a>
</div>
<!--操作-->
<div   style="display: none;" id="goodsListBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="goods:update"  >编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" shiro:hasPermission="goods:delete" lay-event="del" >删除</a>
</div>

<!-- 添加和修改开始 -->
<div id="dataFrmContent" style="padding: 10px;display: none;" >
	<form class="layui-form" method="post" id="dataFrm" lay-filter="dataFrm" >
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">选择供应商</label>
				<div class="layui-input-inline">
					<input type="hidden" name="id">
					<select name="providerid" id="providerid">
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-inline">
					<input type="text" name="goodsname" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">产地</label>
				<div class="layui-input-inline">
					<input type="text" name="produceplace" placeholder="产地"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">规格</label>
				<div class="layui-input-inline">
					<input type="tel" name="size" placeholder="规格" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">包装</label>
				<div class="layui-input-inline">
					<input type="text" name="goodspackage" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">生产批号</label>
				<div class="layui-input-inline">
					<input type="text" name="productcode" placeholder="生产批号"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">批准文号</label>
				<div class="layui-input-inline">
					<input type="tel" name="promitcode" placeholder="批准文号"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">销售价格</label>
				<div class="layui-input-inline">
					<input type="text" name="price" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">是否可用</label>
				<div class="layui-input-inline">
					<input type="radio" name="available" value="1" title="是" checked="">
					<input type="radio" name="available" value="0" title="否">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">库存</label>
				<div class="layui-input-inline">
					<input type="text" name="number" placeholder="库存"
						lay-verify="required|number" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">预警库存</label>
				<div class="layui-input-inline">
					<input type="text" name="dangernum" placeholder="预警库存"
						lay-verify="required|number" autocomplete="off"
						class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">商品描述</label>
			<div class="layui-input-block">
				<input placeholder="请输入商品描述" name="description"
					class="layui-input"></input>
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">商品图片</label>
			<div class="layui-upload">
				<img class="layui-upload-img" width="100px" height="80px" id="goodsimg_img">
				<button type="button" class="layui-btn" id="goodspath">上传图片</button>
				<span id="goodsText"></span>
				<input type="hidden" name="goodsimg" id="goodsimg" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" style="text-align: center;">
			<button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			<button type="reset" class="layui-btn layui-btn-warm">重置</button>
		</div>
	</form>
</div>
<!-- 添加和修改结束 -->

<script type="text/javascript" src="/resources/layui/layui.js"></script>
</body>
<script type="text/javascript">
    var tableIns;
    layui.use(['form','layer','table','laydate', 'upload' ],function(){
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            laydate=layui.laydate,
            table = layui.table,
            upload=layui.upload;
        //加载查询的下拉列表的数据
         initProviderSelect($("#searchproviderid"));
        //商品列表
        tableIns = table.render({
            elem: '#goodsList',
            url : '/goods/loadAllGoods',
            cellMinWidth : 95,
            toolbar: '#tableToolBar',
            page : true,
            height : "full-220",
            limits : [10,15,20,25],
            defaultToolbar: ['filter','print'],
            limit : 10,
            id : "goodsListTable",
            cols : [ [
/*                 {type: "checkbox", fixed:"left", width:50},
 */             {field: 'id', title: 'ID', width:80, align:"center"},
                {field: 'goodsname', title: '商品名称', width:100, align:"center"},
                {field: 'providername', title: '供应商', width:100, align:"center"},
                {field: 'produceplace', title: '产地', width:100, align:"center"},
                {field: 'size', title: '规格', width:100, align:"center"},
                {field: 'goodspackage', title: '包装', width:100, align:"center"},
                {field: 'productcode', title: '生产批号', width:100, align:"center"},
                {field: 'promitcode', title: '批准文号', width:100, align:"center"},
                {field: 'description', title: '描述', width:100, align:"center"},
                {field: 'price', title: '价格', width:100, align:"center"},
                {field: 'number', title: '库存', width:100, align:"center"},
                {field: 'dangernum', title: '预警值', width:100, align:"center"},
                {field: 'goodsimg', title: '图片', width:100, align:"center",templet:function(d){
                	var path=d.goodsimg;
                	return "<img width=40 height=40 src=/file/dowload?path="+path+" />";
                }},
                {field : 'available',width : 100,align : 'center',title : '是否可用',templet:function(d){
    				return d.available==1?'<font color=blue>是</font>':'<font color=red>否</font>'
    			}}, 
                {title: '操作', width:185, templet:'#goodsListBar',fixed:"right",align:"center"}
            ] ]
        });

        //查询
        $("#doSearch").click(function(){
            var params=$("#searchForm").serialize();
            table.reload('goodsListTable', {
                url: '/goods/loadAllGoods?'+params
            });
        });
        //监听头工具栏事件
        table.on('toolbar(goodsList)', function(obj){
            switch(obj.event){
	            case 'add':
	               	toAddGoods();
                	break;
            };
        });

        //打开 添加商品的弹出层
        var url="";
        var mainIndex;
        function toAddGoods(){
            mainIndex = layui.layer.open({
                title : "添加商品",
                type : 1,//页面层
                area:["1100px","500px"],
                content : $("#dataFrmContent"),
                skin:'layui-layer-molv',
                maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
                success : function(layero, index){
                    $("#dataFrm")[0].reset();
                    $("#goodsimg_img").attr({src:'/file/dowload?path=defaultgoodsimg.jpg'});//默认的显示值
                    $('#goodsimg').val('defaultgoodsimg.jpg');//默认的提交到数据库的值
                    initProviderSelect($("#providerid"));
                    //初始化文件上传的
						var uploadInst = upload.render({
									elem : '#goodspath',
									url : '/file/uploadFile',
									accept:'images',
									acceptMime:'image/*',
									field:'mf',
									before : function(obj) {
										//预读本地文件示例，不支持ie8
										obj.preview(function(index, file,
												result) {
											$('#goodsimg_img').attr('src', result); //图片链接（base64）
										});
									},
									done : function(res) {
										//如果上传失败
										if (res.code < 0) {
											return layer.msg('上传失败');
										}
										//上传成功
										$('#goodsimg').val(res.data.src);//设置要提交到数据库里面的路径
									},
									error : function() {
										//演示失败状态，并实现重传
										var goodsText = $('#goodsText');
										goodsText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs goods-reload">重试</a>');
										goodsText.find('.goods-reload').on(
												'click', function() {
													uploadInst.upload();
												});
									}
								});
                    url="/goods/addGoods"
                }
            })
        }
        
        //修改商品
        function updateGoods(data){
            	mainIndex = layui.layer.open({
                title : "修改商品",
                type : 1,
                area:["1100px","500px"],
                skin:'layui-layer-molv',
                content : $("#dataFrmContent"),
                success : function(layero, index){
                	$("#dataFrm")[0].reset();
                	
                	$('[name=available]').each(function(i,item){
						if($(item).val()==data.available){
							$(item).prop('checked',true);
							layui.use('form',function(){
								
								form.render();
							});
						}
					});
                	
                	
                	form.val("dataFrm",data);
                    $("#goodsimg_img").attr({src:'/file/dowload?path='+data.goodsimg});
                    initProviderSelect($("#providerid"),function(){
                    	$("#providerid").val(data.providerid);
                    	form.render();
                    });
                    url="/goods/updateGoods"
                }
            })
        }
        //监听提交
        form.on('submit(doSubmit)', function(data){
            var params=$("#dataFrm").serialize();
            $.post(url,params,function(obj){
    				layer.msg(obj.msg);
    				layer.close(mainIndex);
    				tableIns.reload();
            })
            return false;
        });
        
        //列表操作
        table.on('tool(goodsList)', function(obj){
            var layEvent = obj.event,
                data = obj.data;
            if(layEvent === 'edit'){ //编辑
                updateGoods(data);//data主当前点击的行
            }else if(layEvent === 'del'){ //删除
                layer.confirm('确定删【'+data.goodsname+'】商品吗？',{icon:3, title:'提示信息'},function(index){
                    $.post("/goods/deleteGoods",{
                        id : data.id , //将需要删除的id作为参数传入
                        goodsimg:data.goodsimg
                    },function(data){
                        //刷新table
                        tableIns.reload();
                        //关闭提示框
                        layer.close(index);
                    })
                });
            }
        });
        //初始化下拉列表里面的值
        function initProviderSelect(elem,fun){
        	$.post("/provider/loadAllProviderForList?available=1",function(obj){
        		elem.html("<option value=''>请选择供应商</option>");
            	for(var i=0;i<obj.length;i++){
            		var o=obj[i];
            		elem.append("<option value="+o.id+" > "+o.providername+" </option> ")
            	}
            	form.render("select");
            	if(fun!= undefined ){
            		fun();
            	}
            });
        }
    })
    
</script>
</html>